<template>
	<div>
		<div style="background-color: #FFFFFF;padding-top: 6.4vw;">
			<div class="pet-flex title-box">
				<div>
					<span class="title">限时促销</span>
					<span class="iconfont icon-xianshi"></span>
					<span class="h2">限时的定量大放血</span>
				</div>
				<div @click="toSale('cuxiao')">
					<span class="all-text">全部</span>
					<span class="iconfont icon-jinru2"></span>
				</div>
			</div>
			<block v-if="limitShow == 1">
				<scroll-view class="scroll-view" :scroll-x="true">
					<div class="scroll">
						<div class="box" v-for="(item,inedx) in 8" @click="toDetails(1, 'cuxiao')">
							<div class="box-img">
								<image src="/static/img/posters.png" mode="aspectFill"></image>
							</div>
							<div class="box-text">
								<p class="title2">C/MEO COLLECTC/MEO COLLECT...</p>
								<p class="pet-font12-black pet-normal">Rose of No Man's...Rose of No Man's...</p>
								<div class="pet-flex">
									<p style="font-size: 3.73vw;font-weight: 500;"><span
											style="font-size: 3.2vw;">￥</span>431.00</p>
									<p class="pet-font10-bbb" style="color: #bbbbbb;"><span
											class="pet-font10-mm">￥</span>625.00</p>
								</div>

							</div>
							<p class="sale-text">
								<label class="pet-font10-time ">限时秒杀</label>
								<label class="pet-font10-time left">3折</label>
							</p>
						</div>
						<div class="all">
							<div class="pd-50">
								<span class="all-text">查</span>
								<span class="all-text">看</span>
								<span class="all-text">所</span>
								<span class="all-text">有</span>
								<span class="iconfont icon-jinru"></span>
							</div>
						</div>
					</div>
				</scroll-view>
			</block>
			<block v-else-if="limitShow == 2">
				<div class="saleTwo-box">

					<!-- 图片数据 -->
					<div class="big-box" v-for="item in 3">
						<div class="left-box">
							<image src="/static/img/posters.png" mode="aspectFill"></image>
						</div>
						<div class="right-box">
							<div class="text-box">
								<p class="title-text">欧式将军罐摆件陶瓷配铜储物...</p>
								<p class="text">“开始”作品表达每个人一开始都是不同的，都是特殊的存在</p>
							</div>
							<div class="money-box">
								<p class="money">
									<label><span>￥</span>1,988.00</label>
									<label>￥625.00</label>
								</p>
								<p>
									<span class="pet-font10-time">限时秒杀</span>
									<span class="pet-font10-time left">3折</span>
								</p>
								<p class="time">限时在 22:51:12 后结束</p>
							</div>
						</div>
					</div>
				</div>
			</block>
			<block v-else-if="limitShow == 3">
				<div class='saleThree-box'>
					<div style="display: block;">
						<div class="big-box" v-for="item in 4">
							<image src="/static/img/posters.png" mode="aspectFill"></image>
							<p class="title">C/MEO COLLECTION...</p>
							<p class="text">Rose of No Man's...</p>
							<p class="money">
								<label><span>￥</span>431</label>
								<label>￥625.00</label>
							</p>
							<p>
								<span class="pet-font10-time">限时秒杀</span>
								<span class="pet-font10-time left">3折</span>
							</p>
						</div>
					</div>
				</div>
			</block>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			limitShow: {
				type: Number,
				default: 1
			}
		}
	}
</script>

<style lang="scss">
	.all-text {
		color: #bbbbbb;
		font-size: 3.2vw;
	}

	.pet-flex {
		display: flex;
	}

	.title-box {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 4.27vw;
		padding: 0 4.27vw;
		padding-right: 4.27vw;

		.icon-xianshi {
			margin-left: 2.67vw;
			color: #D2AD87;
			position: relative;
			top: 0.38vw;
		}

		.h2 {
			color: #000;
			font-size: 3.2vw;
			font-weight: Light;
			margin-left: 0.8vw;
		}

		.title {
			font-size: 4.27vw;
			color: #232323;
			font-weight: Medium;
		}

		.icon-jinru2 {
			width: 2.13vw;
			height: 1.99vw;
			color: #efefef;
			font-weight: bold;
			margin: 0;
			position: relative;
			top: 0.39vw;
		}
	}

	.pet-font10-time {
		border: 1px solid #D2AD87;
		border-radius: 0.53vw;
		padding: 0.27vw 1.07vw;
		font-size: 2.67vw;
		color: #D2AD87;
	}

	.left {
		margin-left: 1.07vw;
	}
	.all {
		height: 65.6vw;
		width: 12.8vw;
		background-color: #F8F8F8;
		border-radius: 2.13vw;
		display: flex;
		flex-direction: column;
		margin-right: 4.27vw;
		border-radius: 2.13vw;
	
		.pd-50 {
			padding-top: 20.53vw;
	
			.all-text {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #181818;
				font-size: 3.2vw;
				font-weight: bold;
			}
	
			.icon-jinru {
				margin-top: 2.13vw;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #BBBBBB;
				font-size: 4vw;
				font-weight: bold;
			}
		}
	}
	.sale-box {
		padding-top: 6.4vw;
		background-color: #fff;
		border-bottom: 0.27vw solid #F8F8F8;
	}

	// 滑动图片里的样式
	.scroll-view {
		margin-top: 4.27vw;
		width: 100%;
		padding-bottom: 6.67vw;

		.scroll {
			padding-left: 4.27vw;
			white-space: nowrap;
			display: inline-flex;
			flex-direction: row;

			.box {
				display: inline-block;
				width: 32vw;
				margin-right: 2.13vw;

				&:last-child {
					margin-right: 4.27vw;
				}

				.box-img {
					width: 32vw;
					height: 42.67vw;
					margin-bottom: 2.13vw;

					image {
						width: 32vw;
						height: 42.67vw;
						border-radius: 2.13vw;
					}
				}

				.box-text {
					p {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 3.2vw;
					}

					.title2 {
						font-size: 3.2vw;
						color: #181818;
						font-weight: bold;
					}

					.pet-flex {
						margin-top: 1.07vw;
						display: flex;
						align-items: center;


						.pet-font10-bbb {
							margin-left: 1.07vw;
							text-decoration: line-through;
						}
					}

				}
			}

			.all {
				height: 65.6vw;
				width: 12.8vw;
				background-color: #F8F8F8;
				border-radius: 2.13vw;
				display: flex;
				flex-direction: column;
				margin-right: 4.27vw;
				border-radius: 2.13vw;

				.pd-50 {
					padding-top: 20.53vw;
				}
			}
		}
	}

	.saleTwo-box {
		background-color: #fff;
		border-bottom: 0.27vw solid #F8F8F8;
		// border-top: 0.27vw solid #F8F8F8;

		.big-box {
			padding: 4.27vw;
			display: flex;

			.left-box {
				height: 42.67vw;

				image {
					width: 32vw;
					height: 42.67vw;
					border-radius: 2.13vw;
				}
			}

			.right-box {
				display: flex;
				flex-direction: column;
				margin-left: 4.27vw;

				.text-box {
					.title-text {
						color: #181818;
						font-size: 3.73vw;
						font-weight: bold;
					}

					.text {
						margin-top: 1.07vw;
						color: #BBBBBB;
						font-weight: Light;
						font-size: 3.2vw;
					}
				}

				.money-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					.money {
						label:nth-child(1) {
							color: #000000;
							font-size: 4.27vw;
							font-weight: 500;

							span {
								font-size: 3.2vw;
							}
						}

						label:nth-child(2) {
							color: #BBBBBB;
							font-size: 2.67vw;
							text-decoration: line-through;
							margin-left: 1.07vw;
						}
					}

					.time {
						margin-top: 3.47vw;
						color: #C14A46;
						font-weight: Light;
						font-size: 3.2vw;
					}
				}
			}
		}
	}

	.saleThree-box {
		background-color: #fff;
		// border-top: 0.27vw solid #F8F8F8;
		padding: 4.27vw;
		padding-right: 0;
		padding-top: 0;

		.big-box {
			display: inline-block;
			margin-top: 4.27vw;
			margin-right: 2.93vw;

			image {
				width: 44.27vw;
				height: 58.93vw;
				border-radius: 2.13vw;
			}

			.title {
				color: #181818;
				font-size: 3.73vw;
				font-weight: bold;
			}

			.text {
				color: #000000;
				font-size: 3.2vw;
				font-weight: Light;
			}

			.money {
				margin-top: 2.13vw;
				color: #181818;
				font-size: 3.73vw;
				font-weight: 500;

				span:nth-child(1) {
					font-size: 3.2vw;
				}

				label:nth-child(2) {
					font-size: 2.67vw;
					color: #BBBBBB;
					font-weight: Light;
					text-decoration: line-through;
					margin-left: 1.07vw;
				}
			}
		}
	}
</style>
